
<style>
.ttl {
	width: 70px;
	text-align: right;
	display-inline: block;
}

.pop_cont_input ul li {
	width: 25%;
	float: left;
}

.pop_cont_input {
	line-height: 30px;
	max-height:<?php echo $height*1.5;?>px;
	padding: 10px 15px 50px;
}

.pop_cont_input input {
	pading: 0px 5px;
}

.pop_cont_input select {
	height: 28px;
}

.pop_cont .pop_cont_input li .textbox {
	border: 1px #d2d2d2 solid;
	width: 140px;
	display: inline-block;
}

.pop_cont {
	background: white;
	min-width: 300px;
	position: absolute;
	top: 2%;
	left: 50%;
	margin-left: -48%;
	border-radius: 5px 5px 0 0;
	overflow-y: scroll;
}


#box{ margin:10px auto; width:98%; min-height:400px; background:#cfcfcf}
#clipArea {
	margin: 10px;
	height: <?php echo $height+72;?>px;
}

.NIEclosebg{
	position: absolute;
	top:40px;
	right: 40px;
	background: white;
	padding: 6px 12px 3px 12px;
	border-radius: 50%;
}
.NIEclose{
	margin-top: -2px;
	-webkit-appearance: none;
	padding: 0;
	cursor: pointer;
	background: 0;
	border: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: red;
	text-shadow: 0 1px 0 #fff;
	filter: alpha(opacity=20);
	/*opacity: .2;*/
}

.clipbottom{
	width:<?php echo $width;?>px;
	margin:10px auto 0 auto;
	overflow:hidden;
	height: 200px;
}
#view {
	margin: 0 auto;
	width: <?php echo $width/2;?>px;
	height: <?php echo $height/2;?>px;
	float:left;
}
.NIEbtnAll{
	float:right;
	padding-right:20%;
	padding-top:30px;
	position:relative;
}
#file{
	width: 82px;
	height: 34px;
	position: absolute;
	left: 0;
	top: 30px;
	opacity: 0;
	cursor: pointer;
}
.NIEbtn{
	display:block;
	padding: 6px 12px;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #fff;
	background-color: #0066cd;
	border-color: #0066cd;
}
#clipBtn{
	display:block;
	padding: 6px 12px;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #fff;
	outline: none;
	background-color: #31c2A5;
	border-color: #31c2A5;
	min-width: 82px;
}
#NIEsub{margin-bottom:0}
.modal-header{
	padding: 15px 20px;
	background-color: #f4f5f9;
	border-bottom: 0;
}
.modal-header .close {
	margin-top: -2px;
	-webkit-appearance: none;
	padding: 0;
	cursor: pointer;
	background: 0 0;
	border: 0;
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	filter: alpha(opacity=20);
	opacity:0.2;
	outline: none;
}
.modal-title {
	font-size: 16px;
	font-family: inherit;
	font-weight: 600;
}
</style>
<!--引入JS-->
<script type="text/javascript"
	src="/static/admin/js/ajaxfileupload.js?t=1"></script>


<div class="pop_cont" style="width: 96%;height: 90%;">
	<input type="hidden" value="<?php echo $id; ?>" id="editId" />
	<form autocomplete="off" action="#" id="myform"></form>
	<!--title-->
	<h3>
		图片裁剪上传
		<span class="falseBtn"
			style="color: red; float: right; font-size: 18px; cursor: pointer;">X</span>
	</h3>
	<!--content-->
	<div class="pop_cont_input">

				<div id="zc_detail">

					<div id="clipArea" style="border-radius: 2px;"></div>
					<div class="clipbottom">
						<div id="view" style="border-radius: 2px;"></div>
						<div class="NIEbtnAll">
							<button class="NIEbtn">选取图片</button>
							<input type="file" id="file">
							<button id="clipBtn">截取图片</button>
							<button id="NIEsub" class="NIEbtn">提交上传</button>
						</div>
					</div>
				</div>

				<!--bottom:operate->button-->
		<div class="btm_btn" style="height: 100px;">
			<!--<input type="button" value="确认" class="input_btn trueBtn" />-->
			<input type="button" value="关闭" class="input_btn falseBtn" />
		</div>

	</div>






</div>
<script src="/static/clip/js/jquery-1.10.2.min.js"></script>
<script src="/static/clip/js/iscroll-zoom.js"></script>
<script src="/static/clip/js/hammer.js"></script>
<script src="/static/clip/js/jquery.photoClip.js"></script>
<script type="text/javascript" src="/static/js/drag-arrange.js"></script>
<script>
	var viewW = $(".clipbottom").width();
	if(viewW<300){
		$(".NIEbtnAll").css("padding","0");
		$("#file").css("top","0")
	}
</script>
<script>
	window._file="";
    var width="<?php echo $width; ?>";
    var height="<?php echo $height; ?>";


	$("#clipArea").photoClip({
		width: width,
		height: height,
		strictSize:true,
		file: "#file",
		view: "#view",
		ok: "#clipBtn",
		loadStart: function() {
		console.log("照片读取中");
	},
	loadComplete: function() {
		console.log("照片读取完成");
	},
	clipFinish: function(dataURL) {
		console.log(dataURL);
		window._file=dataURL
	}
	});
	$("#NIEsub").click(function(){
		upFiles();
	})
	function upFiles()
	{
		var file=window._file;
		if(file=="")
		{
			alert("请上传并截取图片");
			return false;
		}
		var url='/admin/fileclip/addClipImg'

		$.ajax({
			type: 'POST',
			url: url,
			data: {file:file,sys_opt:'addHotData'},
			success: function(data){
				if(data.err==0)
				{
					alert("上传成功");
					// //$("#<?php echo $dataid ?>").val(data.data.pic);
					// var html='<a href="'+data.data.pic+'" target="_blank"><img src="'+data.data.pic+'" style="width:120px;margin:5px;" />';
					// $("#<?php echo $msgshow ?>").html(html);


					var tmpHtml ='<div class="fileItem" data-id="" data-pic="'+data.data.pic+'">' +
							'<div class="productClose">X</div>' +
							'<a href="'+data.data.pic+'" target="_blank"><img class="productImg" src="'+data.data.pic+'" /></a>' +
							'</div>'
					$("#<?php echo $msgshow ?>").append(tmpHtml);
					setTimeout(function(){
						serportArrangeable();
					},1000);

					$(".pop_bg").fadeOut();
				}
			},
			dataType: 'json'
		});
	}

</script>
<script>
$(function(){
   $(".trueBtn").unbind().bind("click",function(){
	var that =this;
	$(".pop_bg").fadeOut();
  });
   //弹出：取消或关闭按钮
   $(".falseBtn").unbind().bind("click",function(){
	 $(".pop_bg").fadeOut();
   });
});
</script>